<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <canvas class="canvas" width="960" height="600"></canvas>
  <!-- 游戏说明页面 -->
  <div class="gameStart">
    <img src="./logo/logo-01.png" alt="">
    <h1>How to Play Star Battle.</h1>
    <div class="title_cont">
      <p> Move the spaceship using the sensible areas in the screen;</p>
      <p> The timer present the time lapsed;</p>
      <p> The fuel counter show the remain fuel;</p>
      <p> During the flight, the spaceship needs to destroy the asteroids and enemy spaceships that are presented in
        the
        space;</p>
      <p> You can shoot pressing Space Bar;</p>
      <p> If the spaceship hits a asteroid or another spaceship, you lose 15 points of fuel;</p>
      <p> Enemy spaceship needs 1 shot to be destroyed, you will get 5 points for each enemy destroyed;</p>
      <p> Asteroid needs 2 shots to be destroyed, you will get 10 points for each asteroid destroyed;</p>
      <p> If you destroy a friendly spaceship, you lose 10 points;</p>
      <p> During the flight, the spaceship needs to collect fuel in the space;</p>
      <p> You can pause the game clicking in a button pause, or pressing the letter "p";</p>
      <p> Go beyond all limits;</p>
    </div>
    <h2>Battle in Space with Star Battle Championship...</h2>
    <!-- 开始按钮 -->
    <button class="start">Start Game</button>
  </div>
  <!-- 游戏信息 -->
  <div class="gameInfo">
    <!-- 游戏时间 -->
    <div class="time_cont">
      <img src="./images/time.png" alt="">
      <div class="time">0秒</div>
    </div>
    <!-- 燃油计数器 -->
    <div class="fuelCounter_cont">
      <span class="fuelFont">燃料：</span>
      <div class="fuelCounter">
        <div class="progress"></div>
        <span>15</span>
      </div>
    </div>
    <!-- 分数 -->
    <div class="score_cont">
      <img src="./images/分数.png" alt="">:
      <div class="score">0分</div>
    </div>
    <!-- 暂停 -->
    <div class="suspend">
      <!-- 暂停游戏 -->
      <div class="pause_game">
        <img src="./images/继续.png" alt="">
      </div>
      <!-- 暂停音乐 -->
      <div class="pause_music">
        <img src="./images/音乐.png" alt="">
      </div>
      <!-- 增大字体 -->
      <div class="maxSize">
        <img src="./images/字体.png" alt="">
      </div>
      <!-- 增小字体 -->
      <div class="minSize">
        <img src="./images/字体-.png" alt="">
      </div>
    </div>
  </div>
  <div class="box">
    <!-- 游戏控制器 -->
    <div class="controller_box">
      <div class="controller">
        <div class="controller_item">
          <img src="images/上.png" class="item_img" index="top" alt="">
        </div>
        <div class="controller_item">
          <img src="images/上.png" class="item_img" index="right" alt="">
        </div>
        <div class="controller_item">
          <img src="images/上.png" class="item_img" index="left" alt="">
        </div>
        <div class="controller_item">
          <img src="images/上.png" class="item_img" index="bottom" alt="">
        </div>
      </div>
    </div>
  </div>
  <!-- 信息表 -->
  <div class="infoTable">
    <div class="tableName">
      用户名：<input type="text" class="userName" placeholder="请输入用户名">
    </div>
    <button class="submit">submit</button>
  </div>
  <!-- 排行榜 -->
  <div class="ranking">
    <h2>排行榜</h2>
    <table>
      <thead>
        <tr>
          <th>pisition</th>
          <th>name</th>
          <th>score</th>
          <th>time</th>
        </tr>
      </thead>
      <tbody class="tbody">
        <tr>
          <td>1</td>
          <td>EASY</td>
          <td>JOHN DOE</td>
          <td>1:00</td>
        </tr>
      </tbody>
    </table>
    <button class="restart">Restart the game</button>
  </div>
  <audio loop id="background">
    <source src="./sound/background.mp3" type="audio/ogg">
  </audio>
  <audio id="destroyed">
    <source src="./sound/destroyed.mp3" type="audio/ogg">
  </audio>
  <audio id="shoot">
    <source src="./sound/shoot.mp3" type="audio/ogg">
  </audio>
  <script src="./js/init.js"></script>
  <script type="module">
    import { gameBoard } from './js/gameBoard.js'
    for (let i in image_arr) {
      let img = new Image
      img.src = image_arr[i]
      images[i] = img
      img.onload = () => {
        check_load()
      }
    }
    let img_nm = 0
    function check_load() {
      img_nm++
      if (img_nm == Object.keys(image_arr).length) {
        new gameBoard
      }
    }
  </script>
</body>

</html>